<template>
  <div>
    <div style="font-size: x-large">
      hello 
    </div>
    <div>
      {{ a }} {{ b }}
    </div>
    <div>
      {{ data.a }} {{ data.b }}
    </div>
    <div>
      <input v-model="data.a">
    </div>
    <div>
      <span v-if = "data.name == '佩奇'"> 佩奇</span>
      <span v-else-if = "data.name == '乔治'">乔治</span>
      <span v-else>宝宝</span>
    </div>
    <div style="display: flex;">
      <div @click="show(item)"  style="background-color: brown;width: 300px;height: 300px;text-align: center;font-size: 30px;margin-left: 10px;"v-for="item in data.arr">{{ item }}</div>
    </div>
    <div>
      <select style="width: 100px;">
        <option v-for="item in data.fruits">{{ item }}</option>
      </select>
    </div>
    <div>
      <button v-on:click="clik()">点我加分</button>
    </div>
    <div style=" margin-bottom: 30px;">
      <img :src= "data.img">
    </div>
    <div>
      <el-button @click="clickdata()" plain size ="large">jn</el-button>
      <el-button @click="clickdata()" plain size ="small">jn</el-button>
      <el-input v-model = "data.a" style="width: 200px;":prefix-icon="Search"></el-input>
        
      
    </div>
    


  </div>
</template>


<script setup>
import { reactive, ref } from 'vue';
import { Search } from "@element-plus/icons-vue"
const a =ref(1)
const b =ref("我是谁")

const data = reactive({
  a:111,
  b:"你是谁",
  name:"sadg",
  arr: [1,2,3],
  fruits: ['apple','orange','banana'],
  img : 'https://tse3-mm.cn.bing.net/th/id/OIP-C.d3YP_TUqRS…HaFj?w=223&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3'
})
const clickdata = () =>{
  alert("使用组件")
}
const show = (vaule) =>{
  alert(vaule)
}

const clik = () => {
  alert("分数+1")
}
</script>